<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>购物车</title>
    <link type="image/x-icon" rel="shortcut icon"  href="/images/logo.ico">
    <link rel="stylesheet" href="/stylesheets/bootstrap.css">
    <link rel="stylesheet" href="/stylesheets/index.css">
    <link rel="stylesheet" href="/stylesheets/reset.css">
    <link rel="stylesheet" href="/stylesheets/carts.css">
</head>
<body class="cbp-spmenu-push">
    
    <div class="container"><%include header%></div>
    <%if(book.length==0){%>
        <div class="container text-center">
            <h1 class="color">空空如也</h1>
        </div>
    <%}else{%>
        <section class="cartMain">
        
            <div class="cartMain_hd">
                <ul class="order_lists cartTop">
                    <li class="list_chk">
                        <!--所有商品全选-->
                        <input type="checkbox" id="all" class="whole_check">
                        <label for="all"></label>
                        全选
                    </li>
                    <li class="list_con">商品信息</li>
                    <li class="list_info">商品参数</li>
                    <li class="list_price">单价</li>
                    <li class="list_amount">数量</li>
                    <li class="list_sum">金额</li>
                    <li class="list_op">操作</li>
                </ul>
            </div>
        
            <div class="cartBox">
                <div class="shop_info">
                    <div class="all_check">
                        <!--店铺全选-->
                        <input type="checkbox" id="shop_a" class="shopChoice">
                        <label for="shop_a" class="shop"></label>
                    </div>
                    <div class="shop_name">
                        店铺：
                        <a href="javascript:;" class="color">栗豪的书店</a>
                    </div>
                </div>
                <div class="order_content"  id="order_list">
                    <%for(var i=0;i<book.length;i++){%>
                        <ul class="order_lists">
                            <li class="list_chk">
                                <input type="checkbox" id="checkbox_<%=i+2%>" class="son_check" value="<%=book[i]._id%>">
                                <label for="checkbox_<%=i+2%>"></label>
                            </li>
                            <li class="list_con"><div class="list_img"><a href="/bookDetil/?id=<%=book[i].book_id._id%>"><img src="/images/books/<%=book[i].book_id.img%>" ></a></div><div class="list_text" style="margin-top:50px"><a href="/bookDetil/?id=<%=book[i].book_id._id%>"><%=book[i].name%></a></div></li>
                            <li class="list_info">
                                <p>作者 : <%=book[i].author%></p>
                                <p>分类 : <%=book[i].colmun%></p>
                                <p>出版日期 : 2018-1-1</p><p>页数 : 520页(10万字)</p>
                            </li>
                            <li class="list_price"><p class="price" style="margin-top:50px">￥<%=book[i].money%></p></li>
                            <li class="list_amount">
                                <div class="amount_box" style="margin-top:50px">
                                    <a href="javascript:;" class="reduce reSty" onclick="bookNum('<%=parseInt(book[i].num)-1%>','<%=book[i]._id%>')">-</a>
                                    <input type="text" value="<%=book[i].num%>" class="sum">
                                    <a href="javascript:;" class="plus" onclick="bookNum('<%=parseInt(book[i].num)+1%>','<%=book[i]._id%>')">+</a>
                                </div>
                            </li>
                            <li class="list_sum"><p class="sum_price" style="margin-top:50px">￥<%=parseInt((book[i].money)*(book[i].num))%></p></li>
                            <li class="list_op">
                                <p class="del">
                                    <span  data-toggle="modal" data-target="#myModal" class="moveBook" onclick="moveBook('<%=book[i]._id%>')" >移除商品</span>
                                </p>
                            </li>
                        </ul>
                        <%}%>
                </div>
            </div>
        
            <!--底部-->
            <div class="bar-wrapper">
                <div class="bar-right">
                    <div class="piece">已选商品
                        <strong class="piece_num">0</strong>件</div>
                    <div class="totalMoney">共计:
                        <input type="hidden" id="total_input" value="">
                        <strong class="total_text">0.00</strong>
                    </div>
                    <div class="calBtn">
                        <a href="javascript:;" onclick="order()">结算</a>
                    </div>
                </div>
            </div>
        </section>
    <%}%>        
   
    <!--移除商品模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">移除商品</h4>
                </div>
                <div class="modal-body">你确定要移除这本书吗?</div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-danger" data-dismiss="modal" onclick="moveBookSure()">确定</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <script src="/javascripts/jquery-3.2.1.min.js"></script>
    <script src="/javascripts/bootstrap.js"></script>
    <script src="/javascripts/layer/layer.js"></script>
    <script src="/javascripts/carts.js"></script>
</body>
</html>